Device Pixel Ratio
物理ピクセル (= デバイスピクセル) と論理ピクセル (=CSSピクセル) の比率
window.devicePixelRatio (dpr) で得られる値
簡単に言い換えると
CSSでの1pxを、デバイスピクセル使って表現しているか？という値
https://gyazo.com/78e5f93bd57555ba27784e4e4b4e3678 https://parashuto.com/rriver/development/pixel-related-info-for-coping-with-retina-displays
いまさら聞けないRetina対応のための「ピクセル」の話 | Rriver
Retinaディスプレイは上図の中央 (dpr=2) になっている
これこそが
Retina環境でウェブページのキャプチャを撮ると画像サイズが縦横2倍になる現象の理由
https://gyazo.com/43ce5445d2d02100f0f34f9d53077b9b
dpi awareなimg CustomElementをつくるの話題が生まれる
将来的には冒頭図の右端の例のようにdpr=3になるデバイスも出てくる？
デバイスとDPR対応表 (daiiz.icon 調べ)
table:DPR
DPR
MacBook Air 2014 1.0
MacBook Pro 2017 Retina 2.0
Pixel Slate 2.25
Pixel 3a 2.75